<template>
	<div class="view" 
		@click="clickPreview" 
		:class="data.status == 1? 'leisure' : data.status == 3? 'using' : data.status == 2? 'clear': 'maintain'">
		<div class="title">
			<img :src="statusImg" alt="">
			<p class="state">{{status}}</p>
			<p class="type"><span v-for="item in dimes">{{dimesJson(item.did)}}</span></p>
		</div>
		<div class="main">
			<p>{{data.name}}</p>
			<p>{{data.number}}</p>
		</div>
	</div>
</template>

<script>
export default {
	props: ['data', 'dimes'],
	computed: {
		statusImg() {
			let url = '';
			let data = this.data;
			if (data.status == 1) {
				url = require('@/assets/leisure.png');
			} else if (data.status == 3) {
				url = require('@/assets/using.png');
			} else if (data.status == 2) {
				url = require('@/assets/clear.png');
			} else if (data.status == 4) {
				url = require('@/assets/maintain.png');
			}
			return url;
		},
		status() {
			let data = this.data;
			let text = ''
			if (data.status == 1) {
				text = '空闲';
			} else if (data.status == 3) {
				text = '使用中';
			} else if (data.status == 2) {
				text = '清理中';
			} else if (data.status == 4) {
				text = '维修中';
			}
			return text;
		},
	},
	mounted() {
		
	},
	methods: {
		dimesJson(val) {
			let json = JSON.parse('{'+ this.data.dimes +'}');
			return json[val]
		},
		clickPreview() {
			this.$emit('on-click')
		}
	}
}
</script>

<style scoped lang="less">
.view {
	width: 2rem;
	height: 1.4rem;
	background: rgba(255,255,255,0.1);
	border: .01rem solid rgba(255,255,255,0.1);
	border-radius: .05rem;
	margin-top: .3rem;
	margin-right: .2rem;
	padding: .15rem;
	color: #fff;
	cursor: pointer;
	.title {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: .15rem;
		.state {
			float: left;
			margin-left: .1rem;
		}
		.type {
			position: absolute;
			top: .04rem;
			right: 0;
		}
		img {
			width: .3rem;
			height: .3rem;
		}
	}
	.main {
		text-align: center;
		p {
			font-size: .2rem;
		}
	}
	
}
.leisure {
	border: .01rem solid #74CE6B;
}
.using {
	border: .01rem solid #EF8B22;
}
.clear {
	border: .01rem solid #5CABF3;
}
.maintain {
	border: .01rem solid #B6BACE;
}
</style>